<template>
  <div class="echarts">
    <div class="echart" ref="chart"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import { resize } from "@/mixins/echarts";

export default {
  name: "charts",
  mixins: [resize],
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const initOption = {
        toolbox: {
          show: true,
        },
        title: {
          show: true,
          textStyle: {
            textAlign: "middle",
            color: "#6B6B6B",
          },
          subtextStyle: {
            textAlign: "middle",
            color: "#6B6B6B",
          },
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        //   },
        // },
        legend: {
          // right: "2%",
          // itemGap: 10, // 设置间距
          top: "5%",
          // bottom: "5%",
          icon: "circle",
          itemWidth: 8, // 设置宽度
          itemHeight: 8, // 设置高度
          // orient: "vertical",
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true,
        // },
      };
      initOption && this.chart.setOption(initOption);
    },
    getData() {
      const dataOption = this.data;
      if (this.data.compare) {
        dataOption.tooltip.formatter = (params) => {
          let html = `<ul  style="text-align:left"><li style="line-height:24px"> ${params[0].axisValue}</li>`;
          params.forEach((e) => {
            html += `<li style="line-height:24px"> <span style="display: inline-block;width:80px;">${e.marker}${e.seriesName}</span>   <span style="font-weight: 700;">${e.value}</span></li>`;
          });

          if (params.length === 2) {
            // 环比值计算方法：（此单位时间数值-上个单位时间数值）/上个单位时间数值。结果为正数则为环比上升，结果为负数则为环比下降
            let ratio = (params[1].value - params[0].value) / params[0].value;

            html += `<li style="line-height:24px"><span style="display: inline-block;width:80px;"> 环比</span>  <span style="font-weight: 700;">
            ${Math.abs(ratio.toFixed(4))}%</span>
             <i style='font-weight: 700;color:${
               ratio > 0 ? "#67C23A" : "#F56C6C"
             }' class="el-icon-${ratio > 0 ? "top" : "bottom"}"/> </li></ul>`;
          }

          return html;
        };
      }
      dataOption.series.forEach((item) => {
        item.center = ["50%", "60%"];
      });
      dataOption && this.chart.setOption(dataOption);
    },
  },
};
</script>
<style src="@/styles/echarts.scss" lang="scss" scoped>